<template>
  <view class="battery-container">
    <view class="top-title">
      <text class="icon">
        <text class="iconfont icon-dianchi"></text>
      </text>
      <view class="status">
        <text>放电</text>
        <text class="iconfont">——></text>
        <text>--%</text>
      </view>
      <text>电网功率</text>
      <text class="num">
        <text style="margin-right:10rpx;">--</text>
        <text>W</text>
      </text>
    </view>
    <view class="bottom-data">
      <view class="left">
        <view class="first">
          <view>当日充电量</view>
          <view>
            <text class="integer">--</text>
            <text class="unit">kWh</text>
          </view>
        </view>
        <view class="second">
          <view>当年充电量</view>
          <view>
            <text class="integer">--</text>
            <text class="unit">kWh</text>
          </view>
        </view>
      </view>
      <view class="right">
        <view class="first">
          <view>当月充电量</view>
          <view>
            <text class="integer">--</text>
            <text class="unit">kWh</text>
          </view>
        </view>
        <view class="second">
          <view>累计充电量</view>
          <view>
            <text class="integer">--</text>
            <text class="unit">kWh</text>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-data">
      <view class="left">
        <view class="first">
          <view>当日放电量</view>
          <view>
            <text class="integer">--</text>
            <text class="unit">kWh</text>
          </view>
        </view>
        <view class="second">
          <view>当年放电量</view>
          <view>
            <text class="integer">--</text>
            <text class="unit">MWh</text>
          </view>
        </view>
      </view>
      <view class="right">
        <view class="first">
          <view>当月放电量</view>
          <view>
            <text class="integer">--</text>
            <text class="unit">kWh</text>
          </view>
        </view>
        <view class="second">
          <view>累计放电量</view>
          <view>
            <text class="integer">--</text>
            <text class="unit">kWh</text>
          </view>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
</script>

<style lang="scss" scoped>
  .integer {
    font-size: 32rpx;
    font-weight: bold;
    color: #000;
  }
  
  .decimal {
    font-size: 24rpx;
  
  }
  
  .unit {
    font-size: 24rpx;
    margin-left: 10rpx;
  }
  .battery-container{
    height: 100%;
    padding:20rpx;
    .top-title {
      height: 15%;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      .status{
        font-weight: 600;
        color: #000;
        margin-right: 20rpx;
        display:flex;
        flex-direction: column;
        align-items: center;
        .iconfont{
          color: #60bc7e;
        }
      }
      .num {
        font-weight: 500;
        font-size: 32rpx;
        color: #000;
        margin-left: 20rpx;
      }
    
      .icon {
        background-color: #e9f7f6;
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        display: inline-block;
        margin-right: 20rpx;
        text-align: center;
        line-height: 80rpx;
    
        .iconfont {
          color: #60bc7e;
          font-size: 50rpx;
        }
      }
    }
    
    .bottom-data {
      background-color: #f7f7f7;
      display: flex;
      justify-content: space-between;
      padding: 20rpx 40rpx;
      margin-top: 20rpx;
      font-size: 28rpx;
    
      .left {
        flex: 1;
        text-align: left;
      }
    
      .right {
        flex: 1;
        text-align: left;
      }
    
      .first {
        margin-bottom: 40rpx;
      }
    }
  }
</style>